<template>
  <div class="dignose-status">
    <div class="status-list">
      <div class="status-item warn">
        <i class="status-light main"></i>
        <div class="head">
          <span class="head-title colorBlack">电源状态</span><span class="fr">已检测<i class="colorBlack">1</i>项</span>
        </div>
        <ul>
          <li class="status-detail warn">
            <span class="title">电源开关</span><span class="fr">异常</span>
          </li>
          <li class="status-detail ok">
            <span class="title">电源指示灯</span><i class="status-light branch ok"></i>
          </li>
        </ul>
      </div>
      <div class="status-item">
        <i class="status-light main"></i>
        <div class="head">
          <span class="head-title colorBlack">电源状态</span><span class="fr">已检测<i class="colorBlack">1</i>项</span>
        </div>
        <ul>
          <li class="status-detail">
            <span class="title">电源开关</span><span class="fr">异常</span>
          </li>
          <li class="status-detail">
            <span class="title">电源指示灯</span><i class="status-light branch"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'StatusList',
  data () {
    return {}
  }
}
</script>

<style lang="stylus">
  greenColor = rgb(45, 205, 40)
  orangeColor = rgb(245, 102, 36)
  .dignose-status
    padding 1rem .25rem 0
  
  .status-list
    font-size .35rem
    color gray
    .fr
      float right
    .colorBlack
      color black
    .status-item
      position relative
      padding-left .5rem
      padding-bottom .5rem
      border-left 1px solid gray
    .status-item:last-child
      padding-bottom 0rem
    .status-light
      display block
      width Size = 0.3rem
      height Size
      background-color  gray
      border-radius 50%
      transition all .5s ease
      &.main
        position absolute
        left -(Size / 2)
        top (Size - .3rem)
      &.branch
        position absolute
        right 0
        top 50%
        margin-top -(Size / 2)
    .ok
      & > i
        background-color greenColor
      & > span
        color greenColor
    .warn
      & > i
        background-color orangeColor
      & > span
        color orangeColor
    .head
      margin-bottom .1rem
    .head-title
      font-size .4rem
    .status-detail
      position relative 
</style>
